<template>
  <div align="center">
    <h1>展示图书</h1>
    <p><input type="text" v-model="name">
      <button @click="search">搜索</button>
    </p>
    <table border="1" cellspacing="0">
      <tr>
        <td>图书</td>
        <td>价钱
          <button @click="get_px">{{ paixu }}</button>
        </td>
        <td>分类</td>
      </tr>
      <tr v-for="i in book">
        <td>{{ i.name }}</td>
        <td>{{ i.price }}</td>
        <td>{{ i.cate.name }}</td>
      </tr>
    </table>
    <button v-for="i in tpage" @click="get_book(i)">{{ i }}</button>
  </div>
</template>

<script>
export default {
  name: "get_book",
  data() {
    return {
      book: [],
      tpage: 0,
      cpage: 1,
      name: "",
      paixu: '升序',
      types: 1 //1是降序 2是升序
    }
  },
  methods: {
    get_book(i) {
      this.$axios.get('book/?cpage=' + i)
        .then(res => {
          this.book = res.data.list
          this.tpage = res.data.tpage
        })
    },
    search() {
      this.$axios.get('book/?name=' + this.name)
        .then(res => {
          this.book = res.data.list
        })
    },
    get_px() {
      this.$axios.get('paixu/?types=' + this.types + '&?cpage=' + this.cpage)
        .then(res => {
          this.book = res.data.list
          this.types = res.data.types
          if (this.types == 1) {
            this.paixu = '升序'

          } else if (this.types == 2) {
            this.paixu = '降序'

          }
        })

    }
  },
  mounted() {
    this.get_book(1)
  }
}
</script>

<style scoped>

</style>
